<template>
	<view class="container">
		<view class="u-flex u-row-center u-m-50" v-if="list.length == 0" style="flex-direction: column;">
			<image style="width:300rpx;height:300rpx;" mode="widthFix" src="../../../static/img/nog.png"></image>
			<text style="color:#ccc">暂无关注</text>
		</view>
		<view class="list">
			<view @click="detailCompany(item.userId)" class="item" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="f-logo" :style="{ backgroundImage: 'url(' + (item.logo != null ? baseUrl+item.logo : defaultLogo )+ ')' }"><image :src="logoMask" mode="aspectFill"></image></view>
				</view>
				<view class="center">
					<view class="title">{{item.name}}</view>
					<view class="tag" :class="{'tag2':item.identityType===2,'tag3':item.identityType===0}">
						{{item.identityType === 0?'个人':item.identityType === 1?'企业':item.identityType === 2?'团队':''}}
					</view>
				</view>
				<view class="right">
					<view class="btn" @click="handleClickdel(item.id)">取消关注</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-loadmore class="u-m-t-40" v-if="list.length == 3" :status="loadStatus" bgColor="#f4f4f4"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			baseUrl:this.$mConfig.baseUrl,
			logoMask: this.$mAssetsPath.logoMask,
			defaultLogo: this.$mAssetsPath.defaultLogo,
				followLogo:this.$mAssetsPath.followLogo,
				form: {
					pageNum: 1,
					pageSize: 10,
					status: 1
				},
				loadStatus: 'loadmore',
				list: []
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh: function() {
			this.form.pageNum = 1;
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom:function(e){
			// 此tab为空数据
			this.form.pageNum += 1;
			this.loadStatus= "loading";
			this.getList(this.form.pageNum);
			setTimeout(() => {
				this.loadStatus="loadmore";
			}, 1000);
		},
		methods: {
			detailCompany(e){
				if(this.current == 2){
					this.$mRouter.push({
						route:this.$mRoutesConfig.teamPage,
						query:{
							id:e
						}
					});
				}else{
					this.$mRouter.push({
						route:this.$mRoutesConfig.releaseNumber,
						query:{
							id:e
						}
					});
				}
			},
			async handleClickdel(id){
				let data = await this.$apis.deleteFollow({
					followId:id
				});
				if(data.code === 200){
					this.$refs.uToast.show({
						title: '取消成功',
						type: 'success'
					})
					this.getList();
				}
			},
			async getList(page) {
				let data = await this.$apis.selectFollowAll(this.form);
				if (data.data.last) {
					this.loadStatus = "nomore";
				}
				if (page) {
					this.list = this.list.concat(data.data.content);
				} else {
					this.list = data.data.content;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f4f4f4;
	}
	.container{
		.list{
			.item{
				border-bottom: #f4f4f4 solid 1upx;
				height: 154upx;
				width: 100%;
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 0 24upx;
				justify-content: space-between;
				.center{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;
					padding: 32upx 24upx;
					.title{
						color: #0E1E36;
						font-size: 30upx;
						font-weight: 500;
					}
					.tag{
						color: #6ADE7E;
						border: #4ED688 solid 1upx;
						border-radius: 4px;
						width:fit-content;
						width:-webkit-fit-content;
						width:-moz-fit-content;
						padding: 5upx 12upx;
						font-size: 24upx;
						line-height: 24upx;
					}
					.tag2{
						color: #50AAFE;
						border: #50AAFE solid 1upx;
					}
					.tag3{
						color: #ff55ff;
						border: #ff55ff solid 1upx;
					}
				}
				.right{
					.btn{
						width: 153upx;
						height: 58upx;
						border: #AB62FF solid 2upx;
						color: #AB62FF;
						border-radius: 29upx;
						text-align: center;
						line-height: 58upx;
					}
				}
			}
		}
	}
	.f-logo {
		width: 102rpx;
		height: 118rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		background-size: auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
		image {
			width: 102rpx;
			height: 118rpx;
		}
	}
</style>
